<template>
  <a-card :bodyStyle="{padding:'15px'}" :headStyle="{minHeight:'48px'}">
    <template #title>
      <a-space>
        <Icon icon="StarOutlined" class="text-[red] cursor-pointer" v-if="itemData.isStar"></Icon>
        <a href="javascript:;"
           @click="toQuestionDetail"
           class="text-[14px] font-[400]">{{ itemData.title }}
        </a>
      </a-space>
    </template>
    <template #extra>
      <a-space size="small">
        <a-tag color="blue" v-if="itemData.isPublished">已发布</a-tag>
        <a-tag color="default" v-else>未发布</a-tag>
        <span>答卷: {{ itemData.answerCount }}</span>
        <span>{{ itemData.createdAt }}</span>
      </a-space>
    </template>
    <div class="flex justify-between items-center">
      <div>
        <a-space size="small">
          <a-button type="text" class="px-[7px]" @click="toQuestionDetail">
            <template #icon>
              <Icon icon="EditOutlined" class="text-[14px]"></Icon>
            </template>
            编辑问卷
          </a-button>
          <a-button type="text" :disabled="!itemData.isPublished" class="px-[7px]" @click="toStatDetail">
            <template #icon>
              <Icon icon="LineChartOutlined" class="text-[14px]"></Icon>
            </template>
            问卷统计
          </a-button>
        </a-space>
      </div>
      <div>
        <a-space size="small">
          <a-button type="text" class="px-[7px] text-[#999]" @click="updateStar">
            <template #icon>
              <Icon icon="StarOutlined" class="text-[14px]"></Icon>
            </template>
            <template v-if="!itemData.isStar">标星</template>
            <template v-else>取消标星</template>
          </a-button>
          <a-popconfirm
              title="确定复制该问卷？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="confirm"
          >
            <a-button type="text" class="px-[7px] text-[#999]">
              <template #icon>
                <Icon icon="CopyOutlined" class="text-[14px]"></Icon>
              </template>
              复制
            </a-button>
          </a-popconfirm>
          <a-button type="text" class="px-[7px] text-[#999]" @click="deleteItem">
            <template #icon>
              <Icon icon="DeleteOutlined" class="text-[14px]"></Icon>
            </template>
            删除
          </a-button>
        </a-space>
      </div>
    </div>
  </a-card>
</template>

<script setup>
import {Icon} from "../../utils/Icon.js";
import {defineProps} from "vue";
import {useRouter, useRoute} from "vue-router";
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
import {createVNode} from 'vue';

const $router = useRouter()
const $route = useRoute()
import {storeToRefs} from "pinia";
import useQuestion from "../../store/question.js";
import useStat from "../../store/stat.js";
import {message, Modal} from 'ant-design-vue';
import {deleteQuestionItem} from "../../http/api.js";

const {questionData} = storeToRefs(useQuestion())
const {itemData} = defineProps({
  itemData: {
    type: Object,
    default: {}
  }
})
const deleteQuestion = async (id) => {
  await deleteQuestionItem(id)
  useStat().deleteItem(itemData._id)
  message.success('删除成功')
}
const deleteItem = () => {
  Modal.confirm({
    title: '确定删除该问卷？',
    icon: createVNode(ExclamationCircleOutlined),
    onOk() {
      deleteQuestion(itemData._id)
    },
    onCancel() {
      console.log('Cancel');
    },
    class: 'test',
  });
}
const confirm = (e) => {
  $router.push({name: 'edit', params: {id: itemData?._id}})
  message.success('复制成功');
};

const toQuestionDetail = () => {
  if ($route.fullPath.includes('list')) {
    $router.push({name: 'edit', params: {id: itemData?._id,}, query: {my: 1}})
  } else {
    $router.push({name: 'edit', params: {id: itemData?._id}})
  }

}
const toStatDetail = () => {
  questionData.value = itemData
  $router.push({name: 'stat', params: {id: itemData?._id}})
}
const updateStar = () => {
  useStat().updateStar(itemData._id)
  message.success('已更新')
}
</script>

<style scoped>
:deep(.ant-card-head) {
  padding: 0 15px;
}
</style>
